<template>
  <div>
    <Header title="健康信息上传">
    </Header>
    <van-form @submit="submitFrom">
      <van-field name="jkm" label="粤康码截图" label-class="vaild">
        <template #input>
          <van-uploader
            v-model="selfUserInfo.jkm"
            :after-read="afterRead('jkm')"
            accept="image/*"
            :max-count="1"
            :max-size="uploadMaxSize"
            @oversize="onOversize"
            @delete="deletePic('jkm')"
          />
        </template>
      </van-field>
      <van-notice-bar>
        1.请按<span
        class="down-load"
        @click="preview('ykm')"
      >（粤康码操作指引）</span
      >
        进行截图、上传；<br/>
        2.抵达佛山前一天上传最新截图
      </van-notice-bar>
      <van-field name="xck" label="行程卡截图" label-class="vaild">
        <template #input>
          <van-uploader
            v-model="selfUserInfo.xck"
            :after-read="afterRead('xck')"
            accept="image/*"
            :max-count="1"
            :max-size="uploadMaxSize"
            @oversize="onOversize"
            @delete="deletePic('xck')"
          />
        </template>
      </van-field>
      <van-notice-bar>
        1.请按<span
        class="down-load"
        @click="preview('xck')"
      >（行程卡操作指引）</span
      >
        进行截图、上传；<br/>
        2.抵达佛山前一天上传最新截图
      </van-notice-bar>
      <van-field name="jzqk" label="新冠疫苗接种情况" label-class="vaild">
        <template #input>
          <van-uploader
            v-model="selfUserInfo.jzqk"
            :after-read="afterRead('jzqk')"
            accept="image/*"
            :max-count="1"
            :max-size="uploadMaxSize"
            @oversize="onOversize"
            @delete="deletePic('jzqk')"
          />
        </template>
      </van-field>
      <van-notice-bar>
        抵达佛山前一天上传最新截图
      </van-notice-bar>
      <van-notice-bar :scrollable="false" wrapable>
        请按<span
        class="down-load"
        @click="preview('yhs')"
      >（粤核酸操作指引）</span
      >
        提前在小程序自主填写好个人信息，生
        成个人二维码并截图保存，在核酸采样前出示给医务人员进行
        扫码绑定。<br/>

      </van-notice-bar>
      <!--      <van-notice-bar>-->
      <!--        <p @click="$router.push({name:'FyzyDetail'})">请点击查看<span-->
      <!--          class="down-load"-->
      <!--        >(防疫指引详情)</span-->
      <!--        ></p>-->
      <!--      </van-notice-bar>-->
      <div class="mar-16">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
    <overlay v-if="czzyShow" :czzyImages="czzyImages" @close="czzyShow=false"></overlay>

  </div>
</template>

<script>
import minixUploadPic from '@/minix/minixUploadPic'
import Overlay from '@/components/Overlay'
import { getSelfInfo } from '@/utils/tokenUtil'
import picUtil from '@/utils/picUtil'
import { loadUserInfo } from 'api/userInfo'

export default {
  mixins: [minixUploadPic], //复用mixin
  components: { Overlay },
  data() {
    return {
      selfUserInfo: {},
      picArray: [picUtil.jkm, picUtil.xck, picUtil.jzqk]
    }
  },
  mounted() {
    this.loadUserInfo()
  },

  methods: {
    loadUserInfo() {
      loadUserInfo({ id: getSelfInfo().id }).then((res) => {
        let rs = JSON.parse(res.data)
        rs = rs[0]
        this.selfUserInfo = { ...rs }
      })
    },
    submitFrom() {
      let lackPic = false
      this.picArray.forEach(picType => {
        if (this.selfUserInfo[picType] == undefined || this.selfUserInfo[picType].length <= 0) {
          lackPic = true
        }
      })
      if (!lackPic) {
        this.$dialog.alert({
          message: '提交成功'
        }).then(() => {
          this.$router.push({ name: 'PersonalCenter' })
        })
      } else {
        this.$dialog.alert({
          message: '请上传粤康码，行程卡截图，新冠疫苗接种情况'
        })
      }
    }
  }
}
</script>

<style scoped>
.down-load {
  display: inline;
  color: red;
  font-weight: bold;
}
</style>
